<template>
  <!-- 聊天界面item样式 -->
  <div>
    <div v-if="!chatitem.isPyp" class='chatItem'>
      <div>
        <img :class="{pyp:isActive}" :style="imgStyle" :src="chatitem.headerimg" @click="ondbclick" alt='' />
      </div>
      <slot></slot>
    </div>
    <div v-else>
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: ['chatitem', 'id'],
  data () {
    return {
      isActive: false,
      imgStyle: {
        width: '50px',
        height: '50px',
        paddingTop: '10px'
      }
    }
  },
  methods: {
    ondbclick () {
      this.isActive = true
      const newObject = {
        name: this.chatitem.name,
        index: this.id
      }
      setTimeout(() => {
        this.isActive = false
      }, 1000)
      this.$store.dispatch('_pyp', newObject)
    }
  }
}
</script>

<style scoped>
.chatItem {
  display: flex;
  flex-direction: row;
  widows: 100%;
}
.pyp{
  animation: shake 0.5s 0s infinite;
}
@keyframes shake {
  0%{
    transform: rotate(0deg);
  }
  10%{
    transform: rotate(-6deg);
  }
  30%{
    transform: rotate(6deg);
  }
  60%{
    transform: rotate(-6deg);
  }
  90%{
    transform: rotate(6deg);
  }
  100%{
    transform: rotate(0deg);
  }
}
/* #i_item{
} */
</style>
